/**
 * Copyright 2025 Adobe. All rights reserved.
 * This file is licensed to you under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License. You may obtain a copy
 * of the License at http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under
 * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
 * OF ANY KIND, either express or implied. See the License for the specific language
 * governing permissions and limitations under the License.
 */

:host {
    --spectrum-badge-corner-radius: var(--spectrum-corner-radius-100);
    --spectrum-badge-line-height: var(--spectrum-line-height-100);
    --spectrum-badge-line-height-cjk: var(--spectrum-cjk-line-height-100);
    --spectrum-badge-label-icon-color: var(--spectrum-white);
    --spectrum-badge-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
    --spectrum-badge-background-color-accent: var(--spectrum-accent-background-color-default);
    --spectrum-badge-background-color-informative: var(--spectrum-informative-background-color-default);
    --spectrum-badge-background-color-negative: var(--spectrum-negative-background-color-default);
    --spectrum-badge-background-color-positive: var(--spectrum-positive-background-color-default);
    --spectrum-badge-background-color-notice: var(--spectrum-notice-background-color-default);
    --spectrum-badge-background-color-gray: var(--spectrum-gray-background-color-default);
    --spectrum-badge-background-color-red: var(--spectrum-red-background-color-default);
    --spectrum-badge-background-color-orange: var(--spectrum-orange-background-color-default);
    --spectrum-badge-background-color-yellow: var(--spectrum-yellow-background-color-default);
    --spectrum-badge-background-color-chartreuse: var(--spectrum-chartreuse-background-color-default);
    --spectrum-badge-background-color-celery: var(--spectrum-celery-background-color-default);
    --spectrum-badge-background-color-green: var(--spectrum-green-background-color-default);
    --spectrum-badge-background-color-seafoam: var(--spectrum-seafoam-background-color-default);
    --spectrum-badge-background-color-cyan: var(--spectrum-cyan-background-color-default);
    --spectrum-badge-background-color-blue: var(--spectrum-blue-background-color-default);
    --spectrum-badge-background-color-indigo: var(--spectrum-indigo-background-color-default);
    --spectrum-badge-background-color-purple: var(--spectrum-purple-background-color-default);
    --spectrum-badge-background-color-fuchsia: var(--spectrum-fuchsia-background-color-default);
    --spectrum-badge-background-color-magenta: var(--spectrum-magenta-background-color-default);
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-100);
    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-100);
    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-100);
    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-100);
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-100);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-100);
    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-100);
    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-100);
    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-100);
    --highcontrast-badge-border-color: CanvasText;
}

:host([variant="celery"]),
:host([variant="chartreuse"]),
:host([variant="orange"]),
:host([variant="yellow"]) {
    --spectrum-badge-label-icon-color: var(--spectrum-black);
}

:host([variant="blue"]),
:host([variant="cyan"]),
:host([variant="fuchsia"]),
:host([variant="gray"]),
:host([variant="green"]),
:host([variant="indigo"]),
:host([variant="magenta"]),
:host([variant="purple"]),
:host([variant="red"]),
:host([variant="seafoam"]) {
    --spectrum-badge-label-icon-color: var(--spectrum-badge-label-icon-color-primary);
}

:host([size="s"]) {
    --spectrum-badge-height: var(--spectrum-component-height-75);
    --spectrum-badge-font-size: var(--spectrum-font-size-75);
    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-75);
    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-75);
    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-75);
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-75);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-75);
    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-75);
    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-75);
    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-75);
}

:host([size="l"]) {
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-200);
    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-200);
    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-200);
    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-200);
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-200);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-200);
    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-200);
    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-200);
    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-200);
}

:host([size="xl"]) {
    --spectrum-badge-height: var(--spectrum-component-height-100);
    --spectrum-badge-font-size: var(--spectrum-font-size-300);
    --spectrum-badge-label-spacing-vertical-top: var(--spectrum-component-top-to-text-300);
    --spectrum-badge-label-spacing-vertical-bottom: var(--spectrum-component-bottom-to-text-300);
    --spectrum-badge-label-spacing-horizontal: var(--spectrum-component-edge-to-text-300);
    --spectrum-badge-workflow-icon-size: var(--spectrum-workflow-icon-size-300);
    --spectrum-badge-icon-text-spacing: var(--spectrum-text-to-visual-300);
    --spectrum-badge-icon-spacing-horizontal: var(--spectrum-component-edge-to-visual-300);
    --spectrum-badge-icon-spacing-vertical-top: var(--spectrum-component-top-to-workflow-icon-300);
    --spectrum-badge-icon-only-spacing-horizontal: var(--spectrum-component-edge-to-visual-only-300);
}

@media (forced-colors: active) {
    :host {
        border-color: var(--highcontrast-badge-border-color);
    }
}

:host {
    min-block-size: var(--mod-badge-height, var(--spectrum-badge-height));
    inline-size: auto;
    vertical-align: middle;
    cursor: default;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: auto;
    border-radius: var(--mod-badge-corner-radius, var(--spectrum-badge-corner-radius));
    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
    border: 1px solid #0000;
    display: inline-flex;
    position: relative;
}

:host,
:host([variant="neutral"]) {
    background: var(--mod-badge-background-color-default, var(--spectrum-badge-background-color-default));
}

:host([variant="accent"]) {
    background: var(--mod-badge-background-color-accent, var(--spectrum-badge-background-color-accent));
}

:host([variant="informative"]) {
    background: var(--mod-badge-background-color-informative, var(--spectrum-badge-background-color-informative));
}

:host([variant="negative"]) {
    background: var(--mod-badge-background-color-negative, var(--spectrum-badge-background-color-negative));
}

:host([variant="positive"]) {
    background: var(--mod-badge-background-color-positive, var(--spectrum-badge-background-color-positive));
}

:host([variant="notice"]) {
    background: var(--mod-badge-background-color-notice, var(--spectrum-badge-background-color-notice));
}

:host([variant="gray"]) {
    background: var(--mod-badge-background-color-gray, var(--spectrum-badge-background-color-gray));
}

:host([variant="red"]) {
    background: var(--mod-badge-background-color-red, var(--spectrum-badge-background-color-red));
}

:host([variant="orange"]) {
    background: var(--mod-badge-background-color-orange, var(--spectrum-badge-background-color-orange));
}

:host([variant="yellow"]) {
    background: var(--mod-badge-background-color-yellow, var(--spectrum-badge-background-color-yellow));
}

:host([variant="chartreuse"]) {
    background: var(--mod-badge-background-color-chartreuse, var(--spectrum-badge-background-color-chartreuse));
}

:host([variant="celery"]) {
    background: var(--mod-badge-background-color-celery, var(--spectrum-badge-background-color-celery));
}

:host([variant="green"]) {
    background: var(--mod-badge-background-color-green, var(--spectrum-badge-background-color-green));
}

:host([variant="seafoam"]) {
    background: var(--mod-badge-background-color-seafoam, var(--spectrum-badge-background-color-seafoam));
}

:host([variant="cyan"]) {
    background: var(--mod-badge-background-color-cyan, var(--spectrum-badge-background-color-cyan));
}

:host([variant="blue"]) {
    background: var(--mod-badge-background-color-blue, var(--spectrum-badge-background-color-blue));
}

:host([variant="indigo"]) {
    background: var(--mod-badge-background-color-indigo, var(--spectrum-badge-background-color-indigo));
}

:host([variant="purple"]) {
    background: var(--mod-badge-background-color-purple, var(--spectrum-badge-background-color-purple));
}

:host([variant="fuchsia"]) {
    background: var(--mod-badge-background-color-fuchsia, var(--spectrum-badge-background-color-fuchsia));
}

:host([variant="magenta"]) {
    background: var(--mod-badge-background-color-magenta, var(--spectrum-badge-background-color-magenta));
}

:host([fixed="inline-start"]) {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}

:host([fixed="inline-end"]) {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}

:host([fixed="block-start"]) {
    border-start-start-radius: 0;
    border-start-end-radius: 0;
}

:host([fixed="block-end"]) {
    border-end-end-radius: 0;
    border-end-start-radius: 0;
}

.label {
    font-size: var(--mod-badge-font-size, var(--spectrum-badge-font-size));
    line-height: var(--mod-badge-line-height, var(--spectrum-badge-line-height));
    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
    padding-block-start: var(--mod-badge-label-spacing-vertical-top, var(--spectrum-badge-label-spacing-vertical-top));
    padding-block-end: var(--mod-badge-label-spacing-vertical-bottom, var(--spectrum-badge-label-spacing-vertical-bottom));
    padding-inline-start: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
    padding-inline-end: var(--mod-badge-label-spacing-horizontal, var(--spectrum-badge-label-spacing-horizontal));
}

.label:lang(ja),
.label:lang(ko),
.label:lang(zh) {
    line-height: var(--mod-badge-line-height-cjk, var(--spectrum-badge-line-height-cjk));
}

[name="icon"] + .label {
    padding-inline-start: 0;
}

::slotted([slot="icon"]) {
    block-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
    inline-size: var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
    flex: 0 0 var(--mod-badge-workflow-icon-size, var(--spectrum-badge-workflow-icon-size));
    color: var(--mod-badge-label-icon-color, var(--spectrum-badge-label-icon-color));
    padding-block-start: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));
    padding-block-end: var(--mod-badge-icon-spacing-vertical-top, var(--spectrum-badge-icon-spacing-vertical-top));
    padding-inline-start: var(--mod-badge-icon-spacing-horizontal, var(--spectrum-badge-icon-spacing-horizontal));
    padding-inline-end: var(--mod-badge-icon-text-spacing, var(--spectrum-badge-icon-text-spacing));
}

[icon-only]::slotted(*) {
    padding-inline-start: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
    padding-inline-end: var(--mod-badge-icon-only-spacing-horizontal, var(--spectrum-badge-icon-only-spacing-horizontal));
}
